<!DOCTYPE HTML>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <title>项目浏览</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <link rel="icon" type="image/x-icon" href="/cctv/favicon.ico"/>
    <link type="text/css" rel="stylesheet" href="/cctv/css/project/findinfo.css"/>
    <script type="text/javascript" src="/cctv/js/jquery-1.9.1.min.js"></script>
    <script type="text/javascript" src="/cctv/js/project/findinfo.js"></script>
</head>
<body>
<div th:replace="navigation::navigation"></div>
<div id="TitleMemu">
    <div style="width:1200px;height:100%;margin:0 auto;">
        <a href="/cctv/project/showlist" title="首页"><img src="/cctv/img/msdi.png"></a>
        <input type="button" th:value="#{project.findinfo.menu.button1}" style="background-color:#51C83D"/>
        <input type="button" th:value="#{project.findinfo.menu.button2}" style="background-color:#00A3FE"/>
    </div>
</div>
<!-- ****************************************************************** -->
<input type="hidden" id="path" th:value="${path}"/>
<div id="main">
    <div id="mainTitle" th:text="${'项目浏览 - ['+project.name +']'}"></div>
    <!-- mian1开始 -->
    <div id="main1">
        <div id="menu1">
            <font color="#51C83D">--- </font><span th:text="#{project.findinfo.pipe.title}"></span><font color="#51C83D"> ---</font>
        </div>
        <div id="head1">
            <div style="width:24px"></div>
            <div style="width:36px">No</div>
            <div style="width:119px">ST / MH</div>
            <div style="width:107px">ST / Depth</div>
            <div style="width:106px">C.L</div>
            <div style="width:106px">I.L</div>
            <div style="width:118px">FH / MH</div>
            <div style="width:106px">FH / Depth</div>
            <div style="width:106px">C.L</div>
            <div style="width:106px">I.L</div>
            <div style="width:153px">Video No</div>
            <div style="width:94px">View</div>
        </div>
        <div id="showpipe">
            <table id="tab1">
                <tr th:each="pipe:${pipes}" align="center" height="24px">
                    <td width="2%"></td>
                    <td width="3%" th:text="${pipe.no}"></td>
                    <td width="10%" th:text="${pipe.smanholeno}"></td>
                    <td width="9%" th:text="${pipe.sdepth}"></td>
                    <td width="9%" th:text="${pipe.scoverlevel}"></td>
                    <td width="9%" th:text="${pipe.sinvertlevel}"></td>
                    <td width="10%" th:text="${pipe.fmanholeno}"></td>
                    <td width="9%" th:text="${pipe.fdepth}"></td>
                    <td width="9%" th:text="${pipe.fcoverlevel}"></td>
                    <td width="9%" th:text="${pipe.finvertlevel}"></td>
                    <td width="13%" th:text="${pipe.videono}" th:title="${pipe.videono}"></td>
                    <td width="8%"><input type="button" th:value="#{project.findinfo.pipe.button}"/></td>
                </tr>
            </table>
        </div>
    </div>

    <div id="main2">
        <input type="hidden" name="id" th:value="${param.id}"/>    <!-- 记录项目ID -->
        <input type="hidden" name="no" th:value="${param.no}"/>    <!-- 记录管道ID -->
        <div id="title1" style="height:30px;">
            <span style="width:102px;">Survey ID</span>
            <span style="width:102px;">Operator</span>
            <span style="width:102px;">Work Order No</span>
            <span style="width:152px;">Pipe Length Reference</span>
            <span style="width:132px;">Purpose</span>
            <span style="width:102px;">Slope</span>
            <span style="width:152px;"><a id="link1">Slope Reference No</a></span>
            <span style="width:102px;">Year Laid</span>
            <span style="width:102px;">Date</span>
            <span style="width:102px;">Time</span>
        </div>
        <div id="value1" style="height:30px;">
            <input type="text" th:value="${pipe.no}" style="width:100px;"/>
            <input type="text" th:value="${pipe.operator}" style="width:100px;"/>
            <input type="text" th:value="${pipe.workorder}" style="width:100px;"/>
            <input type="text" th:value="${pipe.reference}" style="width:150px;background-color:#EBEBE4;"/>
            <input type="text" th:value="${pipe.purposes}" style="width:130px;"/>
            <input type="text" th:value="${pipe.slope}" style="width:100px;"/>
            <input type="text" th:value="${pipe.sloperef}" style="width:150px;"/>
            <input type="text" th:value="${pipe.yearlaid}" style="width:100px;"/>
            <input type="text" th:value="${pipe.date}" style="width:100px;"/>
            <input type="text" th:value="${pipe.time}" style="width:100px;"/>
        </div>

        <div id="title2" style="height:30px;">
            <span style="width:102px;">District1</span>
            <span style="width:102px;">District2</span>
            <span style="width:102px;">District3</span>
            <span style="width:181px;">Road Name</span>
            <span style="width:181px;">House Number</span>
            <span style="width:181px;">Building</span>
            <span style="width:102px;">Division</span>
            <span style="width:209px;">Drainage Area Code</span>
        </div>
        <div id="value2" style="height:30px;">
            <input type="text" th:value="${pipe.district1}" style="width:100px;"/>
            <input type="text" th:value="${pipe.district2}" style="width:100px;"/>
            <input type="text" th:value="${pipe.district3}" style="width:100px;"/>
            <input type="text" th:value="${pipe.roadname}" style="width:179px;"/>
            <input type="text" th:value="${pipe.housenum}" style="width:179px;"/>
            <input type="text" th:value="${pipe.building}" style="width:179px;"/>
            <input type="text" th:value="${pipe.division}" style="width:100px;background-color:#EBEBE4;"/>
            <input type="text" th:value="${pipe.areacode}" style="width:207px;background-color:#EBEBE4;"/>
        </div>
        <div id="title3" style="height:30px;">
            <span style="width:102px;">Start MH</span>
            <span style="width:102px;">Finish MH</span>
            <span style="width:102px;">Use</span>
            <span style="width:102px;">Direction</span>
            <span style="width:102px;">Size(Dia)H</span>
            <span style="width:102px;">Size(Dia)W</span>
            <span style="width:110px;">Shape</span>
            <span style="width:110px;">Material</span>
            <span style="width:109px;">Lining</span>
            <span style="width:102px;">Pipe Length</span>
            <span style="width:102px;">Total Length</span>
        </div>
        <div id="value3" style="height:30px;">
            <input type="text" th:value="${pipe.smanholeno}" style="width:100px"/>
            <input type="text" th:value="${pipe.fmanholeno}" style="width:100px"/>
            <input type="text" th:value="${pipe.uses}" style="width:100px;"/>
            <input type="text" th:value="${pipe.dire}" style="width:100px;"/>
            <input type="text" th:value="${pipe.hsize}" style="width:100px"/>
            <input type="text" th:value="${pipe.wsize}" style="width:100px"/>
            <input type="text" th:value="${pipe.shape}" style="width:108px;"/>
            <input type="text" th:value="${pipe.mater}" style="width:108px;"/>
            <input type="text" th:value="${pipe.lining}" style="width:107px;"/>
            <input type="text" th:value="${pipe.pipelength}" style="width:100px"/>
            <input type="text" th:value="${pipe.testlength}" style="width:100px"/>
        </div>
        <div id="title4" style="height:30px;">
            <span style="width:102px;">Start Depth</span>
            <span style="width:102px;">Cover Level</span>
            <span style="width:102px;">Invert Level</span>
            <span style="width:102px;">Finish Depth</span>
            <span style="width:102px;">Cover Level</span>
            <span style="width:102px;">Invert Level</span>
            <span style="width:110px;">Category</span>
            <span style="width:110px;">Cleaned</span>
            <span style="width:109px;">Weather</span>
            <span style="width:209px;">Video No/File Name</span>
        </div>
        <div id="value4" style="height:30px;">
            <input type="text" th:value="${pipe.sdepth}" style="width:100px"/>
            <input type="text" th:value="${pipe.scoverlevel}" style="width:100px"/>
            <input type="text" th:value="${pipe.sinvertlevel}" style="width:100px;background-color:#EBEBE4;"/>
            <input type="text" th:value="${pipe.fdepth}" style="width:100px"/>
            <input type="text" th:value="${pipe.fcoverlevel}" style="width:100px"/>
            <input type="text" th:value="${pipe.finvertlevel}" style="width:100px;background-color:#EBEBE4;"/>
            <input type="text" th:value="${pipe.category}" style="width:108px"/>
            <input type="text" th:value="${pipe.cleaned}" style="width:108px"/>
            <input type="text" th:value="${pipe.weather}" style="width:107px"/>
            <input type="text" th:value="${pipe.videono}" style="width:207px"/>
        </div>
        <div id="value5" style="height:30px;">
            <span style="width:125px;">Comments General:</span>
            <input type="text" name="comment" th:value="${pipe.comment}" style="width:1063px;margin-top:4px;">
        </div>
        <div id="value6" style="height:30px;">
            <span style="width:60px;text-align: right;">Pipe ID:</span>
            <input type="text" th:value="${pipe.pipeid}" style="width:200px;margin-top:4px;">
            <span style="width:100px;text-align: right;">S.A. Reason:</span>
            <input type="text" th:value="${pipe.reason}" style="width:486px;margin-top:4px;">
            <span style="width:120px;text-align: right;">Survey Method:</span>
            <input type="text" th:value="${pipe.method}" style="width:198px;margin-top:4px;">
        </div>
    </div>

    <!-- 画图显示管道开始 -->
    <canvas id="showpipeimg" width="208px" height="840px"></canvas>
    <!-- 画图显示管道结束 -->
    <div id="showvideo">
        <div class="videoTitle"><font color="#51C83D">--- </font>Video<font color="#51C83D"> ---</font></div>
        <div class="videoTitle"><font color="#51C83D">--- </font>Photo<font color="#51C83D"> ---</font></div>
        <div id="vname" style="float:left;">
            <video id="video" controls="controls" poster="/cctv/img/poster2.png"></video>
            <img id="image" src="/cctv/img/blank-plus.png" style="cursor:pointer;"/>
            <div id="menu2">
                <font color="#51C83D">--- </font><span th:text="#{project.findinfo.item.title}"></span><font color="#51C83D"> ---</font>
            </div>
        </div>
        <table id="title">
            <tr height="20px;" style="background-color: #505984;">
                <th width="27px" rowspan="2"></th>
                <th width="95px" rowspan="2">Video Time</th>
                <th width="95px" rowspan="2">Photo No</th>
                <th width="95px" rowspan="2">Distance</th>
                <th width="76px" rowspan="2">Cont<br/>Def</th>
                <th width="76px" rowspan="2">Code</th>
                <th width="95px" rowspan="2">Dia./Dim</th>
                <th width="95px" colspan="2">Clock</th>
                <th width="95px" colspan="2">Intrusion</th>
                <th width="" rowspan="2">Remarks</th>
            </tr>
            <tr height="20px;" style="background-color: #505984;">
                <th width="46px">At</th>
                <th width="46px">To</th>
                <th width="46px">%</th>
                <th width="46px">mm</th>
            </tr>
        </table>
        <div id="showItem" style="background-color:#dddddd">
            <table id="tab2">
                <tr th:each="item:${pipe.items}">
                    <td width="3%" align="center"></td>
                    <td width="10%" th:text="${item.video}"></td>
                    <td width="10%" th:text="${item.photo}"></td>
                    <td width="10%" th:text="${item.dist}"></td>
                    <td width="8%" th:text="${item.cont}"></td>
                    <td width="8%" th:text="${item.code}"></td>
                    <td width="10%" th:text="${item.diam}"></td>
                    <td width="5%" th:text="${item.clockAt}"></td>
                    <td width="5%" th:text="${item.clockTo}"></td>
                    <td width="5%" th:text="${item.percent}"></td>
                    <td width="5%" th:text="${item.lengths}"></td>
                    <td th:text="${item.remarks}"></td>
                    <td style="display:none" th:text="${item.picture}"></td>
                </tr>
            </table>
        </div>
    </div>
</div>
<div th:if="${!#strings.isEmpty(project.master)}" id="master"><a th:href="@{findinfo(id=${project.master})}">查看外业源数据</a></div>
<input type="file" id="file" accept="video/*" style="display:none"/>

<div style="width:100%;margin-top:20px;color:#ccc;text-align:center;font-size:14px;float:left;">
    <p>香港麦斯迪埃高科技有限责任公司</p>
    <p>Copyright © 2017 All Rights Reserved</p>
</div>
</body>
</html>